<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
    <link href="css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            color: #02177c;
            background: #b3d6ff;
        }
        a, .glyphicon {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        #resText{
            border:#666 1px solid;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>Ajax练习</h1>
    <hr>
    <br>
    <h3>Ajax的load方法</h3>
    <div class="row" >
        <div class="col-md-6 col-md-offset-3">
            <button class="btn btn-success" id="send">ajax获取评论</button>
            <br><br>
            <h4><b>已有评论：</b></h4>
            <div id="resText"></div>
        </div>
    </div>
    <h3>Ajax的load方法筛选元素</h3>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <button class="btn btn-success" id="send2">ajax获取评委</button>
            <br><br>
            <h4><b>已有评委：</b></h4>
            <div id="resText2"></div>
        </div>
    </div>
    <h3>Ajax的load(url, [.data] [.callback])</h3>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h4>Ajax的load方法如果有参数data，则会采用post方式传递，否则用get</h4>
            <h4>Ajax的回调函数，只要请求完成就会触发，而不管是否请求成功！</h4>
        </div>
    </div>

    <div style="height: 500px"></div>
</div>
<script>
$(function(){
    $("#send").click(function(){
        $("#resText").load("02%20Ajax_test.html");
    })
    $("#send2").click(function(){
        $("#resText2").load("02%20Ajax_test.html .panel-heading ").wrap('<div class="panel panel-primary"></div>');
    })

})





</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>